﻿html{
    box-sizing:border-box;
}
body{
  margin: 0; 
  padding:0;
  font-family:"hind",sans-serif; 
  background-color:□#fff;
  color:#4d5974; 
  display: flex;
  min-height:100vh;
}
.container{
  margin: 0 auto;
  padding:4rem; 
  width:48rem;
}
h3{
  font-size:1.75rem;
  color:cornflowerblue;
  padding:1.3rem;
  margin: 0;
}
.accordion a{
  position: relative;
  display: flex;
  flex-direction:column;
  width:100%;
  padding: 1rem 3rem 1rem 1rem;
  color:#7288a2; 
  font-size:1.15rem;
  font-weight:400;
  border-bottom: 1px solid #e5e5e5;
}
.accordion a::after{
  font-family: Font Awesome 5 Free;
  font-weight:600;
  content:"\f067";
  position: absolute; 
  float:right;
  right:1rem;
  font-size: 1rem; 
  color:■#7288a2; 
  padding:5px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid#7288a2;
  text-align:center;
}
.accordion a:hover,
.accordion a:hover::after{
  cursor :pointer;
  color:#00fafa;
}
.accordion a:hover::after{
  border:1px solid #e0fafa;
}
.accordion a.active{
  color: #00fafa;
  border-bottom: 1px solid #00fafa;
}
.accordion a.active::after{
  font-family:"Font Awesome 5 Free";
  font-weight: 600;
  content:"\f068" ;
  color:#00fafa;
  border: 1px solid #00fafa; 
}
.accordion .infof{
  opacity: 0;
  padding:  0 1rem;
  max-height:0;
  border-bottom:1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  transition: all 0.2s ease 0.15s;
}

.accordion .info p{
  font-size: 1rem;
  font-weight:300;
}
.accordion .info.active{
  opacity:1; 
  padding:1rem; 
  max-height:108%;
  transition: all 0.35s ease 0.15s;
}